<template>
    <div class="login-child-register user-form">
        <h3 class='registerTitle'>重置密码</h3>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <Form-item label="手机号码" prop="phone">
                <Input type="text" v-model="formCustom.phone" placeholder="请输入手机号码" number></Input>
            </Form-item>
            <Form-item label="验证码" prop="code">
                <Row>
                    <Col span="15">
                        <Input v-model="formCustom.code" placeholder="请输入验证码">
                    </Input>
                    </Col>
                    <Col span="8">
                        <button class="btn btn-primary" @click="requestBindPhone()" style="margin-left: 18px">获取验证码</button>
                    </Col>
                </Row>
            </Form-item>
            <Form-item label="新密码" prop="passwd">
                <Input type="password" v-model="formCustom.passwd" placeholder="请输入新密码"></Input>
            </Form-item>
            <Form-item label="确认密码" prop="passwdCheck">
                <Input type="password" v-model="formCustom.passwdCheck" placeholder="请确认新密码"></Input>
            </Form-item>
            <div class='submitStyle'>
                <Button type="primary" long @click="handleSubmit()">确认提交</Button>
            </div>
        </Form>
    </div>
</template>
<script>
    import getData from '@/api/getData'

    const phoneReg = /^1(3|4|5|7|8)\d{9}$/;//手机号正则
    const pwdReg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;

    export default {
        data () {
            const validatePass = (rule, value, callback) => {
                if(value === ''){
                    callback(new Error('请输入新密码'));
                }else{
                    if (!pwdReg.test(value)) {
                        callback(new Error('密码长度为6-20位，包含数字、字母'));
                    } else {
                        if (this.formCustom.passwdCheck !== '') {
                            // 对第二个密码框单独验证
                            this.$refs.formCustom.validateField('passwdCheck');
                        }
                        callback();
                    }
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formCustom.passwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号码不能为空'));
                }else{
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    }else if(!phoneReg.test(value)){
                        callback(new Error('请输入正确的手机号码'));
                    }else{
                        callback();
                    }
                }
            };
            const validateCode = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('验证码不能为空'));
                }
            };

            return {
                formCustom: {
                    passwd: '',
                    passwdCheck: '',
                    phone: '',
                    code: ''
                },
                ruleCustom: {
                    passwd: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                    phone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    code: [
                        { validator: validateCode, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                var self = this;
                getData.post("changePwd", {NewPWD :this.formCustom.phone,Code:this.formCustom.code})
                    .then(function (response) {
                        if (response.data.code === 0) {
                            if(response.data.msg === '操作成功'){
                                self.$Message.info(response.data.msg)
                                self.$emit('change-state')
                            }
                        } else {
                            self.$Message.error(response.data.msg)
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });

            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            requestBindPhone: function () {
                var self = this;
                getData.post("GetYZM", {phone : self.formCustom.phone} )
                    .then(function (response) {
                        if(response.data.code != 0){
                            self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                        }
                    })
                    .catch(function (response) {
                        self.$Message.info('网络错误，请联系客服');
                     });
            }
        }
    }
</script>

<style lang="scss">
    .login-child-register {
        font-family: MicrosoftYaHei;
        padding: 50px 40px;

        .registerTitle{
            margin-bottom: 20px;
            margin-left: 20px;
            font: 400 20px '微软雅黑';
            color: #666;
        }

        .submitStyle{
            padding: 0 50px;
        }
    }
</style>
